跳至主要内容

Vue OAuth with Firebase

作者資料

原始 MD by 綱庭

原始碼

github 原碼

依賴套件

firebase node.js github帳號

Let's Implement Vue OAuth

回顧上篇 後端 Authentication 你還記得多少​

OAuth 2.0延伸閱讀

簡單來說OAuth解決了這個問題(減少你的帳號數)​

那前端OAuth可以怎麼實作?​

  1. 到你想要使用OAuth的服務去看它們相關的API
  2. 使用整合型OAuth(今天的方案)

認識它嗎?​

Firebase Introduction​

一個整合型服務，通常用在前端與手機應用程式

支援的SDK有

  1. IOS
  2. Android
  3. Flutter
  4. C++
  5. Unity

Firebase Features​

事實上Firebase提供的服務非常的多這裡舉部分服務為例子

  1. Realtime Base/Firestore 及時資料庫
  2. Cloud Storage 雲端檔案儲存
  3. Machine Learning 機器學習
  4. Google Analytic 行動裝置分析
  5. Cloud Message 雲端通知服務
  6. Firebase Authentication OAuth整合服務

Implement Part(Vue)​

Setup your Vue Application​

yarn create vite

Member to select Vue​

Enter Project​

cd VueFireAuth
code . #開啟VSCODE
yarn install #安裝套件

這樣基本專案就完成了

Implement Part Firebase​

Firebase Console

Create a Firebase Project​

剩下就繼續下一步就OK了

Firebase Auth Setup​

Select OAuth Provider​

Let's Select GitHub

Enable GitHub Login​

哪裡可以取得Client Id,Client Secret?

Start GitHub Application​

GitHub Setting
找到他 Developer Settings

Create New App​

點這裡也可以直接進去

填入Application名稱

Homepage URL/Webhook URL/Callback URL​

在這裡啦

生成完成App就可以獲得ID,Secret​

一開始不會生成Secret請點選generate secret

填入FireAuth並儲存

Implement Part Vue X Firebase​

Fire Auth Offcial Doc Complete GitHub Project

Join Web App in Firebase​

給個App Name

Save Your JS Config​

Firebase Core Setup in Vue​

yarn add firebase

建立資料夾utils且在裡面放firebaseCore.js且貼上前面的JS config

Add Fire Auth firebaseCore.js​

const auth = getAuth(app);
const githubProvider = new GithubAuthProvider();
export { auth, githubProvider }

Complete​